<template>
    <div class="requirement-form">
        <el-form :model="formData" label-width="180px" class="requirement-form">
            <el-card class="form-section">
                <template #header>
                    <h2 class="product-name">新产品研发业务需求表</h2>
                </template>

                <!-- 1. 项目基本信息 -->
                <div class="form-section">
                    <h3 class="item-title">1.项目基本信息</h3>
                    <div class="form-row ">
                        <el-form-item  class="item-name" label="项目名称:">
                            <el-input class="item information" v-model="formData.projectName" placeholder="请输入项目名称" />
                        </el-form-item>
                         <el-form-item class="item-name" label="客户代号:">
                            <el-input class="item information" v-model="formData.projectLocation" placeholder="请输入客户代号" />
                        </el-form-item>
                        <el-form-item class="item-name" label="项目地点:">
                            <el-input class="item information" v-model="formData.projectLocation" placeholder="请输入项目地点" />
                        </el-form-item>
                    </div>
                    <div class="form-row">
                        <el-form-item class="item-name" label="提出部门:">
                            <el-select class="item information" v-model="formData.department" placeholder="请选择提出部门">
                                <el-option
                                    v-for="item in departmentOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                        <el-form-item class="item-name" label="业务对接人:">
                            <el-select class="item information" v-model="formData.proposer" placeholder="请选择业务对接人">
                                <el-option
                                    v-for="item in proposerOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>

                        <el-form-item class="item-name" label="需求接收部门:">
                            <el-select class="item information" v-model="formData.RequirementsDepartment" placeholder="请选择需求接收部门">
                                <el-option
                                    v-for="item in RequirementsDepartmentOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </div>
                </div>

                <!-- 2. 产品类型 -->
                <div class="form-section item-name">
                    <h3 class="item-title">2.产品类别</h3>
                    <el-form-item class=" item-title-2 item " label="产品类型:">
                        <el-radio-group v-model="formData.productType">
                            <el-radio class="item" label="standard">标品</el-radio>
                            <el-radio class="item" label="custom">客制品</el-radio>
                            <el-radio class="item" label="other">其他</el-radio>
                        </el-radio-group>
                        <el-input class="item" v-if="formData.productType === 'other'" v-model="formData.productTypeOther"
                            placeholder="请输入其他类型" />
                    </el-form-item>

                    <el-form-item class="  item" label="产品型号:">
                        <el-cascader
                            v-model="formData.productModel"
                            :options="productModelOptions"
                            :props="{ 
                                checkStrictly: true,
                                expandTrigger: 'hover'
                            }"
                            clearable
                            :show-all-levels="true"
                            collapse-tags
                            collapse-tags-tooltip
                            placeholder="请选择产品型号"
                            class="product-model-cascader"
                            @change="handleProductModelChange"
                        />
                        <el-input
                            v-if="showOtherModelInput"
                            v-model="formData.productModelOther"
                            class="item"
                            style="margin-top: 10px;"
                            placeholder="请输入其他型号详细信息"
                        />
                    </el-form-item>

                    <el-form-item class="  item" label="供货源:">
                        <el-select v-model="formData.supplySource" placeholder="请选择供货源">
                            <el-option label="自制" value="self" />
                            <el-option label="外采" value="external" />
                            <el-option label="新自研" value="newResearch" />
                        </el-select>
                    </el-form-item>
                </div>

                <!-- 3应用场景 -->
                <div class="form-section">
                    <h3 class="item-title">3.应用场景</h3>
                    <el-form-item class="  item" label="应用场景:">
                        <el-select v-model="formData.applicationArea" placeholder="请选择应用场景">
                            <el-option class="item" label="家户用储能" value="home" />
                            <el-option class="item" label="商业用储能" value="business" />
                            <el-option class="item" label="工业用储能" value="industry" />
                            <el-option class="item" label="其他" value="other" />
                        </el-select>
                        <el-input class="item" v-if="formData.applicationArea === 'other'"
                            v-model="formData.applicationAreaOther" placeholder="请输入其他应用场景" />
                    </el-form-item>

                    <el-form-item class="  item" label="应用模式:">
                        <el-select v-model="formData.coreFunctions" multiple placeholder="请选择核心功能">
                            <el-option class="item" label="削峰填谷" value="energy_storage" />
                            <el-option class="item" label="峰谷差价" value="smart_control" />
                            <el-option class="item" label="后备电源" value="backup_power" />
                            <el-option class="item" label="动态扩容" value="backup_power" />
                            <el-option class="item" label="其他" value="other" />
                        </el-select>
                        <el-input class="item" v-if="formData.coreFunctions.includes('other')"
                            v-model="formData.coreFunctionsOther" placeholder="请输入其他核心功能" />
                    </el-form-item>
                </div>

                <!-- 4. 市场分析 -->
                <div class="form-section item-name">
                    <h3 class="item-title">4.市场分析</h3>
                    <el-form-item class="item" label="目标市场:">
                        <el-select v-model="formData.targetMarket" multiple placeholder="请选择目标市场">
                            <el-option class="item" label="国内市场" value="domestic" />
                            <el-option class="item" label="国际市场" value="international" />
                            <el-option class="item" label="其他" value="other" />
                        </el-select>
                        <el-input class="item" v-if="formData.targetMarket.includes('other')"
                            v-model="formData.targetMarketOther" placeholder="请输入其他市场" />
                    </el-form-item>
                    <el-form-item class="item" label="竞品分析:">
                        <el-input type="textarea" class="  " v-model="formData.competitorAnalysis" rows="3"
                            placeholder="请输入主要竞品及其优劣势分析" />
                    </el-form-item>
                </div>

                <!-- 5. 标品各岗位职责 -->
                <div v-if="formData.productType === 'standard'">
                    <h3 class="item-title">5.岗位职责要求</h3>

                    <!-- 销售人员核心考量 -->
                    <el-form-item class="item-title-2" label="销售人员核心考量:">
                        <el-checkbox-group v-model="formData.standardSalesChecklist">
                            <el-checkbox class="item" label="market">市场需求分析</el-checkbox>
                            <el-checkbox class="item" label="competitor">竞品分析</el-checkbox>
                            <el-checkbox class="item" label="profit">利润分析</el-checkbox>
                            <el-checkbox class="item" label="other">其他</el-checkbox>
                        </el-checkbox-group>
                        <el-input class="item" v-if="formData.standardSalesChecklist.includes('other')"
                            v-model="formData.standardSalesOther" placeholder="请输入其他考量因素" />
                    </el-form-item>

                    <!-- 售前或方案人员职责 -->
                    <el-form-item class="item-title-2" label="售前人员职责要求:">
                        <el-checkbox-group v-model="formData.standardPreSalesChecklist">
                            <el-checkbox class="item" label="record">完整记录和梳理业务端需求</el-checkbox>
                            <el-checkbox class="item" label="filter">排除掉不可行项</el-checkbox>
                            <el-checkbox class="item" label="complete">归纳补充并完整记录</el-checkbox>
                            <el-checkbox class="item" label="price">明确产品价格区间及定价策略</el-checkbox>
                            <el-checkbox class="item" label="feasibility">技术可行性</el-checkbox>
                            <el-checkbox class="item" label="compatibility">系统兼容性</el-checkbox>
                            <el-checkbox class="item" label="performance">产品性能和安全性</el-checkbox>
                            <el-checkbox class="item" label="cost">开发成本评估</el-checkbox>
                            <el-checkbox class="item" label="requirements">梳理需求清单</el-checkbox>
                            <el-checkbox class="item" label="other">其他</el-checkbox>
                        </el-checkbox-group>
                        <el-input class="item" v-if="formData.standardPreSalesChecklist.includes('other')"
                            v-model="formData.standardPreSalesOther" placeholder="请输入其他职责" />
                    </el-form-item>

                    <!-- 研发设计人员职责 -->
                    <el-form-item class="item-title-2" label="研发设计人员职责:">
                        <el-checkbox-group v-model="formData.standardDevChecklist">
                            <el-checkbox class="item" label="feasibility">确定技术可行性</el-checkbox>
                            <el-checkbox class="item" label="risk">确定核心风险点</el-checkbox>
                            <el-checkbox class="item" label="delivery">确定项目交期</el-checkbox>
                            <el-checkbox class="item" label="price">确定产品价格区间</el-checkbox>
                            <el-checkbox class="item" label="other">其他</el-checkbox>
                        </el-checkbox-group>
                        <el-input class="item" v-if="formData.standardDevChecklist.includes('other')"
                            v-model="formData.standardDevOther" placeholder="请输入其他职责" />
                    </el-form-item>
                </div>

                <!-- 5. 客制品各岗位职责 -->
                <div v-if="formData.productType === 'custom'">
                    <h3 class="item-title">5.岗位职责要求</h3>

                    <!-- 销售人员核心考量 -->
                    <el-form-item label="销售人员核心考量:">
                        <el-checkbox-group v-model="formData.customSalesChecklist">
                            <el-checkbox class="item" label="market">明确市场和目标</el-checkbox>
                            <el-checkbox class="item" label="usage">明确使用场景</el-checkbox>
                            <el-checkbox class="item" label="core">明确核心功能</el-checkbox>
                            <el-checkbox class="item" label="price">明确价格区间</el-checkbox>
                            <el-checkbox class="item" label="demand">明确核心诉求</el-checkbox>
                            <el-checkbox class="item" label="other">其他</el-checkbox>
                        </el-checkbox-group>
                        <el-input class="item" v-if="formData.customSalesChecklist.includes('other')"
                            v-model="formData.customSalesOther" placeholder="请输入其他考量因素" />
                    </el-form-item>

                    <!-- 售前或方案人员职责 -->
                    <el-form-item label="售前人员职责要求:">
                        <el-checkbox-group v-model="formData.customPreSalesChecklist">
                            <el-checkbox class="item" label="record">完整记录和梳理业务端需求</el-checkbox>
                            <el-checkbox class="item" label="filter">排除掉不可行项</el-checkbox>
                            <el-checkbox class="item" label="complete">归纳补充并完整记录</el-checkbox>
                            <el-checkbox class="item" label="price">明确产品价格区间</el-checkbox>
                            <el-checkbox class="item" label="analyze">分析客户核心诉求</el-checkbox>
                            <el-checkbox class="item" label="compatibility">系统兼容性</el-checkbox>
                            <el-checkbox class="item" label="performance">产品性能和安全性</el-checkbox>
                            <el-checkbox class="item" label="cost">开发成本评估</el-checkbox>
                            <el-checkbox class="item" label="requirements">梳理需求清单</el-checkbox>
                            <el-checkbox class="item" label="other">其他</el-checkbox>
                        </el-checkbox-group>
                        <el-input class="item" v-if="formData.customPreSalesChecklist.includes('other')"
                            v-model="formData.customPreSalesOther" placeholder="请输入其他职责" />
                    </el-form-item>

                    <!-- 研发设计人员职责 -->
                    <el-form-item label="研发设计人员职责:">
                        <el-checkbox-group v-model="formData.standardDevChecklist">
                            <el-checkbox class="item" label="feasibility">确定技术可行性</el-checkbox>
                            <el-checkbox class="item" label="risk">确定核心风险点</el-checkbox>
                            <el-checkbox class="item" label="delivery">确定项目交期</el-checkbox>
                            <el-checkbox class="item" label="price">确定产品价格区间</el-checkbox>
                            <el-checkbox class="item" label="other">其他</el-checkbox>
                        </el-checkbox-group>
                        <el-input class="item" v-if="formData.standardDevChecklist.includes('other')"
                            v-model="formData.standardDevOther" placeholder="请输入其他职责" />
                    </el-form-item>
                </div>

                <!-- 6. 技术需求 -->
                <div class="form-section item-name">
                    <h3 class="item-title">6.技术需求</h3>
                    <el-form-item class="item-title-2" label="技术指标:">
                        <el-input type="textarea" class="item" v-model="formData.technicalSpecs" rows="3"
                            placeholder="请输入关键技术指标要求" />
                    </el-form-item>
                    <el-form-item class="item-title-2" label="安全要求:">
                        <el-checkbox-group v-model="formData.safetyRequirements">
                            <el-checkbox class="item" label="electrical">电气安全</el-checkbox>
                            <el-checkbox class="item" label="mechanical">机械安全</el-checkbox>
                            <el-checkbox class="item" label="environmental">环境适应性</el-checkbox>
                            <el-checkbox class="item" label="other">其他</el-checkbox>
                        </el-checkbox-group>
                        <el-input class="item" v-if="formData.safetyRequirements.includes('other')"
                            v-model="formData.safetyOther" placeholder="请输入其他安全要求" />
                    </el-form-item>
                </div>

                <!-- 7. 需求分析原则 -->
                <div class="form-section">
                    <h3 class="item-title">7.需求分析原则</h3>
                    <el-form-item class="item-title-2" label="基本原则:">
                        <el-checkbox-group v-model="formData.basicPrinciples">
                            <el-checkbox class="item" label="clarity">需求明确性</el-checkbox>
                            <el-checkbox class="item" label="feasibility">可实现性</el-checkbox>
                            <el-checkbox class="item" label="verifiable">可验证性</el-checkbox>
                            <el-checkbox class="item" label="other">其他</el-checkbox>
                        </el-checkbox-group>
                        <el-input class="item" v-if="formData.basicPrinciples.includes('other')"
                            v-model="formData.basicPrinciplesOther" placeholder="请输入其他原则" />
                    </el-form-item> 
                </div>

                <!-- 8. 需求流程 -->
                <div class="form-section">
                    <h3 class="item-title ">8.需求流程状态</h3>
                    <el-form-item class="stepTitle " label="当前阶段:">
                        <el-steps class="item-steps custom-steps" :active="formData.currentStep" finish-status="success"
                            :style="{ '--el-step-title-font-size': '10px', '--el-step-description-font-size': '10px' }">
                            <el-step v-for="(step, index) in ['业务端输出阶段', '售前支持阶段', '团队评估阶段', '执行研发阶段']" :key="index"
                                :title="step" class="item custom-step" />
                        </el-steps>
                    </el-form-item>
                </div>

                <!-- 9. 成本目标 -->
                <div class="form-section">
                    <h3 class="item-title">9.成本目标</h3>
                    <el-form-item label="目标成本:">
                        <el-input-number class="item information" v-model="formData.targetCost" :min="0" :step="1000"
                            placeholder="请输入目标成本" />
                    </el-form-item>
                    <el-form-item label="预计销量:">
                        <el-input-number class="item information" v-model="formData.expectedSales" :min="0" :step="100"
                            placeholder="请输入预计年销量" />
                    </el-form-item>
                </div>

                <!-- 10. 需求文档信息 -->
                <div class="form-section">
                    <h3 class="item-title">10.需求文档信息</h3>
                    <el-form-item label="文档版本:">
                        <el-input class="item information   " v-model="formData.documentVersion"
                            placeholder="请输入文档版本" />
                    </el-form-item>

                    <el-form-item label="需求概述:">
                        <el-input class="item information" type="textarea" v-model="formData.overview" rows="3"
                            placeholder="请输入需求概述" />
                    </el-form-item>

                    <el-form-item label="交期要求:">
                        <el-date-picker class="item information" v-model="formData.deliveryDate" type="date"
                            placeholder="选择交货日期" />
                    </el-form-item>

                    <el-form-item label="预算范围:">
                        <el-input-number class="item information" v-model="formData.budget" :min="0" :step="1000" />
                    </el-form-item>

                    <el-form-item label="风险评估:">
                        <el-select v-model="formData.risks" multiple placeholder="请选择风险点">
                            <el-option class="item" label="技术风险" value="technical" />
                            <el-option class="item" label="市场风险" value="market" />
                            <el-option class="item" label="供应链风险" value="supply" />
                            <el-option class="item" label="其他" value="other" />
                        </el-select>
                        <el-input class="item" v-if="formData.risks.includes('other')" v-model="formData.risksOther"
                            placeholder="请输入其他风险" />
                    </el-form-item>
                </div>

                <!-- 11. 附件信息 -->
                <div class="form-section">
                    <h3 class="item-title">11.附件信息</h3>
                    <el-form-item label="相关文档:">
                        <el-upload class="upload-demo" action="#" :auto-upload="false" multiple>
                            <template #trigger>
                                <el-button type="primary">选择文件</el-button>
                            </template>
                            <el-button class="ml-3" type="success">上传文件</el-button>
                            <template #tip>
                                <div class="el-upload__tip">
                                    可上传客户原始需求资料、技术文档、沟通记录、市场调研报告及其他任何支持文件!
                                </div>
                            </template>
                        </el-upload>
                    </el-form-item>
                </div>
                <!-- 提交按钮 -->
                <el-form-item>
                    <el-button class="" type="primary" @click="submitForm">生成需求文档</el-button>
                    <el-button class="" @click="resetForm">重置</el-button>
                </el-form-item>
            </el-card>
        </el-form>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const formData = reactive({
    projectName: '',
    RequirementsDepartment: '微电储能BU',
    projectLocation: '',
    department: '深圳子公司', // 设置默认选中值
    // proposer: '张三', // 设置默认选中值
    productType: 'standard', // 设置默认值为 'standard'
    productTypeOther: '',    // 新增其他类型的输入值
    standardSalesChecklist: [],
    standardSalesOther: '',
    standardPreSalesChecklist: [],
    standardPreSalesOther: '',
    standardDevChecklist: [],
    standardDevOther: '',
    customSalesChecklist: [],
    customSalesOther: '',
    customPreSalesChecklist: [],
    customPreSalesOther: '',
    basicPrinciples: [],
    basicPrinciplesOther: '',
    applicationArea: '',
    applicationAreaOther: '',
    coreFunctions: [],
    coreFunctionsOther: '',
    currentStep: 0,
    documentVersion: '',
    overview: '',
    deliveryDate: '',
    budget: 0,
    riskAssessment: '',
    risks: [],
    risksOther: '',
    targetMarket: [],
    targetMarketOther: '',
    competitorAnalysis: '',
    technicalSpecs: '',
    safetyRequirements: [],
    safetyOther: '',
    targetCost: 0,
    expectedSales: 0,
    productModel: '', // 产品型号
    productModelOther: '', // 其他型号的详细信息
    supplySource: '', // 供货源
})

const departmentOptions = [
    { value: '深圳子公司', label: '深圳子公司' },
    // { value: '市场部', label: '市场部' },
]

const RequirementsDepartmentOptions = [
    // { value: '市场部', label: '市场部' },
    { value: '外采', label: '外采' },
    { value: '微动力BU', label: '微动' },
    { value: '微电储能BU', label: '微电储能BU' },
]

const proposerOptions = [
    { value: 'Susan', label: 'Susan' },
    { value: 'Fiona', label: 'Fiona' },
    { value: 'Marcin', label: 'Marcin' },
    { value: 'Benjamin', label: 'Benjamin' }
]

const productModelOptions = [
    {
        value: 'household',
        label: '家户用储能',
        children: [
            { value: '5kwh-rack', label: '1. 5Kwh机架电池' },
            { value: '10kwh-rack', label: '2. 10Kwh机架电池' },
            { value: '10kwh-wall', label: '3. 10Kwh壁挂电池' },
            { value: 'high-voltage', label: '4. 高压堆叠电池(5~30.7Kwh)' },
            { value: 'other', label: '5. 其他型号' }
        ]
    },
    {
        value: 'small-commercial',
        label: '中小型工商用储能',
        children: [
            { value: 'outdoor-cabinet', label: '1. 户外电池柜' },
            { value: '200kwh-cabinet', label: '2. 200Kwh一体户外柜' },
            { value: '215kwh-cabinet', label: '3. 215Kwh标准户外柜' },
            { value: '500kwh-1mwh', label: '4. 500Kwh~1Mwh户外柜集成' },
            { value: 'other', label: '5. 其他型号' }
        ]
    },
    {
        value: 'large-commercial',
        label: '大型工商用储能',
        children: [
            { value: '1-10mwh', label: '1. 1MWh - 10MWh' },
            { value: '5-100mwh', label: '2. 5MWh - 100MWh' },
            { value: '100mwh', label: '3. 100MWh' },
            { value: 'other', label: '4. 其他型号' }
        ]
    },
    {
        value: 'super-large',
        label: '超大型工商用储能',
        children: [
            { value: 'above-100mwh', label: '1. 大于100MWh' },
            { value: 'other', label: '2. 其他型号' }
        ]
    }
]

const showOtherModelInput = ref(false)

const handleProductModelChange = (value) => {
    if (!value) {
        showOtherModelInput.value = false
        return
    }
    // 检查选择的值是否包含 'other'
    const selectedValue = value[value.length - 1]
    showOtherModelInput.value = selectedValue === 'other'
    if (!showOtherModelInput.value) {
        formData.productModelOther = '' // 清空其他型号输入
    }
}

const submitForm = () => {
    // 这里添加表单提交逻辑
    ElMessage.success('需求表提交成功！')
}

const resetForm = () => {
    // 重置表单数据
    Object.keys(formData).forEach(key => {
        if (Array.isArray(formData[key])) {
            formData[key] = []
        } else if (typeof formData[key] === 'string') {
            formData[key] = ''
        } else if (typeof formData[key] === 'number') {
            formData[key] = 0
        }
    })
    formData.productType = 'standard' // 重置 productType 为 'standard'
    formData.department = '深圳子公司' // 重置 department 为 '深圳子公司'
    // formData.proposer = '张三' // 重置 proposer 为 '张三'
    formData.productModel = '' // 重置 productModel
    formData.productModelOther = '' // 重置 productModelOther
    formData.supplySource = '' // 重置 supplySource
    showOtherModelInput.value = false
    ElMessage.info('表单已重置')
}
</script>

<style lang="scss" scoped>
@import '@/components/scss/Docment.scss';


</style>